<template>
    <div style="width: 360px;margin: auto;">
        <el-form ref="ruleFormRef" style="max-width: 600px" :model="menuInfo" :rules="rules" label-width="auto"
            class="demo-ruleForm" status-icon>
            <el-form-item label="父级菜单：" prop="parentIds">
                <el-cascader v-model="menuInfo.parentIds" :options="menuList" :props="{ checkStrictly: true }" clearable
                    style="width: 100%;" :show-all-levels="false" />
            </el-form-item>
            <el-form-item label="菜单名称：" prop="menuName">
                <el-input v-model="menuInfo.menuName" />
            </el-form-item>
            <el-form-item label="跳转的Url地址：" prop="menuURL">
                <el-input v-model="menuInfo.menuURL" />
            </el-form-item>
            <el-form-item>
                <el-button style="margin: auto;" type="primary" @click="submitForm(ruleFormRef)">
                    修改
                </el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted, inject } from 'vue'
import { ElMessage, type FormInstance } from 'element-plus'
import { useRouter, useRoute } from 'vue-router'

import http from '@/http'
const router = useRouter()
const route = useRoute()

const menuInfo = reactive({
    menuId: 0,
    menuName: "",
    menuURL: "",
    parentId: 0,
    parentIds: [] as Array<number>,
    sortBy: 0,
    createBy: "string",
    createDate: "2024-03-25T11:31:12.503Z",
    updateBy: "string",
    updateDate: "2024-03-25T11:31:12.503Z"
})

const menuList = ref<{
    value: number,
    label: string,
    parentId: number,
    children: []
}[]>([])

// 校验规则
const ruleFormRef = ref<FormInstance>()
const rules = reactive({
    parentIds: [
        { required: true, message: '请选择父级菜单', trigger: 'change' },
    ],
    menuName: [
        { required: true, message: '请输入菜单名称', trigger: 'blur' },
    ],
    menuURL: [
        { required: true, message: '请输入跳转地址', trigger: 'blur' },
    ],
})

// 获取菜单列表
const getMenuList = () => {
    http.get("/api/Menu/GetMenuListDTO").then(res => {
        menuList.value = res.data;
    })
}

// 获取菜单信息
const getMenuInfo = () => {
    http.get("/api/Menu/GetMenuInfo", {
        params: {
            menuId: route.query.menuId
        }
    }).then(res => {
        menuInfo.menuId = res.data.menuId;
        menuInfo.menuName = res.data.menuName;
        menuInfo.menuURL = res.data.menuURL;
        menuInfo.parentId = res.data.parentId;
        // 级联数据回显
        menuInfo.parentIds = res.data.parentId;
        menuInfo.sortBy = res.data.sortBy;
        menuInfo.createBy = res.data.createBy;
        menuInfo.createDate = res.data.createDate;
        menuInfo.updateBy = res.data.updateBy;
        menuInfo.updateDate = res.data.updateDate;
    })
}

// 修改菜单信息
const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid) => {
        if (valid) {
            // 若长度为null，则说明父级菜单未修改
            if (menuInfo.parentIds.length == undefined) {
                menuInfo.parentId = Number(menuInfo.parentIds);
            }
            // 父级菜单修改
            else {
                menuInfo.parentId = menuInfo.parentIds.splice(-1)[0];
            }
            http.put("/api/Menu/UpdateMenuInfo", menuInfo).then(res => {
                if (res.data > 0) {
                    ElMessage({
                        type: 'success',
                        message: '修改成功',
                        duration: 1000
                    });
                    router.push('/menuListView');
                }
                else if (res.data == -1) {
                    ElMessage({
                        type: 'error',
                        message: '菜单名称重复，请重新输入',
                        duration: 1000
                    })
                }
                else {
                    ElMessage({
                        type: 'error',
                        message: '修改失败',
                        duration: 1000
                    })
                }
            })
        } else {
        }
    })
}

onMounted(() => {
    getMenuList();
    getMenuInfo();
})
</script>

<style scoped></style>